.select {
  @extend .context;

  max-width: 360px;
}

.select__search {
  position: relative;
  border-bottom: 1px solid $color-neutral-200;
}

.select__search-icon {
  color: $color-neutral-300;

  @include absolute(0, auto, auto, 0);
  @include center-text(32px, 14px, 36px);
}

.select__search-input {
  display: block;
  width: 100%;
  border: none;
  padding: 0 12px 0 36px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

  @include fixed-height(36px, 14px);
}

.select__items {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: (4 * 36px) + 20px; // we show max 8 items
  // note that the value is `scroll` and not `auto` because it depends on the
  // v-auto-overflow-scroll directive.
  overflow-y: scroll;

  &::before,
  &::after {
    content: "";
    display: block;
    height: 10px;
    width: 100%;
  }
}

.select__items-loading {
  position: relative;
  height: 32px;

  &::after {
    content: '';
    margin-top: -7px;
    margin-left: -7px;

    @include loading(14px);
    @include absolute(50%, auto, 0, 50%);
  }
}

%select__item-size {
  @include fixed-height(32px, 14px);
}

.select__item {
  position: relative;
  margin: 0 8px 4px 8px;
  padding: 0 32px 0 10px;
  border-radius: 3px;
  user-select: none;

  &:last-child {
    margin-bottom: 0;
  }

  &:hover {
    background-color: $color-neutral-100;
  }

  &.select__item--loading::before {
    content: " ";

    @include loading(14px);
    @include absolute(9px, 9px, auto, auto);
  }

  &.active {
    background-color: $color-primary-100;

    &:not(.select__item--loading)::after {
      @extend .fas;
      @extend %select__item-size;

      content: fa-content($fa-var-check-circle);
      width: 32px;
      text-align: center;
      color: $color-success-500;

      @include absolute(0, 0, auto, auto);
    }

    &:not(.select__item--no-options):hover::after {
      display: none;
    }
  }

  &.disabled:hover {
    background-color: transparent;
  }
}

.select__item-link {
  display: block;
  color: $color-primary-900;

  &:hover {
    text-decoration: none;
  }

  .select__item.disabled & {
    color: $color-neutral-400;

    &:hover {
      cursor: inherit;
    }
  }
}

.select__item-name {
  @extend %ellipsis;
  @extend %select__item-size;
}

.select__item-icon {
  margin-right: 6px;
}

.select__item-description {
  font-size: 11px;
  margin-right: -32px;
  line-height: 140%;
  color: $color-neutral-600;
  padding-bottom: 6px;
}

.select__item-options {
  @extend %select__item-size;

  display: none;
  text-align: center;
  width: 32px;
  color: $color-neutral-300;

  @include absolute(0, 0, auto, auto);

  &:hover {
    color: $color-neutral-700;
  }

  :not(.select__item--loading):not(.select__item--no-options):hover > & {
    display: block;
  }
}

.select__description {
  padding-bottom: 14px;
  text-align: center;
}

.select__footer {
  border-top: 1px solid $color-neutral-200;
}

.select__footer-button {
  position: relative;
  display: block;
  padding: 0 12px;
  color: $color-neutral-600;
  user-select: none;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;

  @include fixed-height(36px, 14px);

  .fas {
    margin-right: 6px;
  }

  &:hover {
    background-color: $color-neutral-100;
    text-decoration: none;
  }

  &.button--loading {
    background-color: $color-neutral-200;
  }
}

.select__footer-create {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 12px 4px 12px;
}

.select__footer-create-link {
  position: relative;
  flex: 0 0 calc(50% - 10px);
  width: calc(50% - 10px);
  color: $color-primary-900;
  border-radius: 3px;
  padding: 0 32px 0 10px;
  margin-bottom: 4px;
  min-width: 0;
  line-height: 26px;
  font-size: 13px;

  &:nth-child(2n+1) {
    margin-right: 20px;
  }

  &:hover {
    text-decoration: none;
  }

  &::after {
    @extend .fas;

    content: fa-content($fa-var-plus);
    color: $color-neutral-200;
    margin-top: -6.5px;
    line-height: 13px;
    font-size: 13px;

    @include absolute(50%, 8px, auto, auto);
  }

  &:not(.select__footer-create-link--disabled):hover {
    text-decoration: none;
    background-color: $color-neutral-100;
  }

  &.select__footer-create-link--disabled {
    color: $color-neutral-400;

    &:hover {
      cursor: inherit;
      text-decoration: none;
    }
  }
}

.select__footer-create-icon {
  color: $color-neutral-300;
  margin-right: 4px;
}
